import * as React from "react"
import { TextStyle, View, ViewStyle, Text } from "react-native"
import { Button, Modal, ElementsIcon as Icon } from "../../components"
import { px2dp } from "../../utils"

export interface CheckLoginModalProps {
  modalVisible: boolean
  closeModal: () => void
  toLogin: () => void
}

const modalViewStyle: ViewStyle = {
  width: px2dp(270),
  height: px2dp(266),
  backgroundColor: "#fff"
}

const warnViewStyle: ViewStyle = {
  paddingTop: px2dp(30),
  paddingRight: px2dp(21),
  paddingBottom: px2dp(9),
  paddingLeft: px2dp(21)
}

const textStyle: TextStyle = {
  marginTop: px2dp(15),
  marginBottom: px2dp(20),
  fontSize: px2dp(12),
  textAlign: "center"
}

const btnStyle: ViewStyle = {
  padding: px2dp(21)
}

/**
 * Stateless functional component for your needs
 *
 * Component description here for TypeScript tips.
 */
export function CheckLoginModal(props: CheckLoginModalProps) {
  // grab the props
  const { modalVisible, closeModal, toLogin } = props

  return (
    <Modal
      visible={modalVisible}
      transparent={true}
      onClose={() => closeModal()}
      maskClosable={true}
    >
      <View style={{ alignItems: "center", justifyContent: "center" }}>
        <View style={modalViewStyle}>
          <View style={warnViewStyle}>
            <Icon name="error" color="#cf2a2a" size={80} />
          </View>
          <Text style={textStyle}>你还未登录, 请先登录</Text>
          <View style={btnStyle}>
            <Button
              testID="toLogin"
              onPress={() => toLogin()}
              style={{ height: 50, backgroundColor: "#cf2a2a" }}
            >
              前往登录
            </Button>
          </View>
        </View>
      </View>
    </Modal>
  )
}
